<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="chart-wrapper">
          最近6小时
          <line-chart :chart-data="chartDataObj" width="330px" height="165px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { querySingleParam } from "@/api/basic/hisMain";
import LineChart from "@/views/components/LineCharts";

const chartDataObj = {
  xAxisData: [], //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  yAxis: {},
  legendData: [], //['aa', 'bb'],
  series: [],
};

export default {
  components: { LineChart },
  props: {
    pointParam: {
      type: Object,
    },
    collectPoint: {
      type: Object,
    },
    chartId: {
      type: String,
    },
  },
  data() {
    return {
      chartDataObj: chartDataObj,
      paramName: this.pointParam.paramInfo.name,
      // 查询参数
      queryParams: {
        pointId: this.collectPoint.id,
        paramId: this.pointParam.paramId,
        params: {
          beginTime: undefined,
          endTime: undefined,
        },
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  watch: {
    pointParam(val) {
      this.queryParams.paramId = this.pointParam.paramId;
      this.paramName = this.pointParam.paramInfo.name;
    },
    collectPoint(val) {
      this.queryParams.pointId = this.collectPoint.id;
      this.getList();
    },
  },
  computed: {
    tabHt() {
      return this.$store.state.app.tableHeight.htp;
    },
  },
  created() {
    this.mounted();
    this.getList();
  },
  methods: {
    mounted() {
      let nowDate = new Date();
      let befDate = new Date(nowDate.getTime() + 1 * 24 * 3600 * 1000);
      let byear = befDate.getFullYear();
      let bmonth = befDate.getMonth() + 1;
      let bday = befDate.getDate();
      let endTime = `${byear}-${bmonth}-${bday}`;
      // 向前推迟一周的时间点
      befDate = new Date(nowDate.getTime() - 1 * 6 * 3600 * 1000);
      byear = befDate.getFullYear();
      bmonth = befDate.getMonth() + 1;
      bday = befDate.getDate();
      let startTime = `${byear}-${bmonth}-${bday}`;

      this.queryParams.params.beginTime = startTime;
      this.queryParams.params.endTime = endTime;
    },
    getList() {
      let _this = this;
      _this.chartDataObj.xAxisData = [];
      _this.chartDataObj.series = [];
      _this.chartDataObj.legendData = [];
      _this.chartDataObj.yAxis = {
        type: "value",
        position: "left",
        min: 0,
        //splitNumber: 10, // Y 轴分隔格数
        splitLine: {
          // Y 轴分隔线样式
          show: true,
          lineStyle: {
            //color: ["#f3f0f0"],
            width: 2,
            type: "solid",
          },
        },
        scale: true,
      };
      querySingleParam(this.queryParams).then((response) => {
        let obj = response;

        _this.chartDataObj.xAxisData = obj.xAxisData;
        _this.chartDataObj.series.push({
          name: this.paramName,
          // smooth: true,
          type: "line",
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: "#3888fa",
              lineStyle: {
                color: "#3888fa",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: obj.valsData,
        });
        // map.put("xAxisData", xAxisData);
        // map.put("valsData", valsData);
        _this.chartDataObj.legendData.push(this.paramName);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
  },
};
</script>
